<template>
	<div class='home'>
		
		<el-tabs v-model="activePath" 
		type="card" tab-position='top' 
		@tab-remove="removeTabLocal" 
		@tab-click="updateTabLocal" 
		@contextmenu.prevent.native="openContextMenu($event)">

			<el-tab-pane
				:key="item.label"
				v-for="item in $store.state.tabs"
				:label="item.label"
				:name="item.name" 
				:tabName='item.tabName'
				:closable = "item.label!='主页'"
			>
				
				<span v-if="item.label=='主页'" slot="label" flag="item.name"><i class="el-icon-s-home"></i>{{item.label}}</span>
				<span v-else slot="label" flag="item.name">{{item.label}}</span>
			</el-tab-pane>
		</el-tabs>
		<keep-alive :include="includeAliveList">
			<router-view class="home-panel"/>
		</keep-alive>


		<ul
			v-show='isShowTabRightMenu'
		  :style="{left:left+'px',top:top+'px'}"
		  class="contextmenu"
		>
		  <li @click="closeAllTabs">关闭所有</li>
		  <li @click="closeOtherTabs('other')">关闭其他</li>
		</ul>
	</div>
</template>

<script>
	import {FIRST_PAGE_ROUTE,
		HOME_PAGE_ROUTE,HOME_PAGE_NAME} from '../../util/constants.js'
	
	export default {
		data() {
			return{
				isShowTabRightMenu:false,
				left:0,
				top:0
			}
		},
		//监控 右键菜单
		watch: {
		    isShowTabRightMenu(value) {
		      if (this.isShowTabRightMenu) {
		        document.body.addEventListener("click", this.closeContextMenu);
		      } else {
		        document.body.removeEventListener("click", this.closeContextMenu);
		      }
		    }
		},
		computed:{
			activePath: {
			  get () {
			    return this.$store.state.activePath;
			  },
			  set (val) {
				//设置 当前活动页的时候记录上一次 的活动页
				  
				this.$store.dispatch('setActiveTab', val);
			  }
			},
			//需要缓存的 标签页集合
			includeAliveList () {
			  return this.$store.state.includeAliveList;
			}
			
		},
		
		methods: {
		  updateTabLocal(tab, event) {
			  if(tab.name==this.$store.state.oldActiveTab){
				  return;
			  }
			  
			  //显示对应路由
			  this.$router.push({ path:tab.name });
			  //激活 对应标签页
			  this.$store.dispatch('setActiveTab', tab.name);
			  //激活 对应的导航项
			  //如果 是首页就默认为0
			  if(tab.label==HOME_PAGE_NAME){
				  this.$store.dispatch('setActiveNav', "0");
			  }else{
				  this.$store.dispatch('setActiveNav', tab.label);
			  }
			  
		  },
		  /**
		   * 点击删除 标签
		   * */
		  removeTabLocal(targetName) {
			this.$store.dispatch('removeTab',targetName);
			
			 //设置路由
			this.$router.push({ path: this.$store.state.activePath });
			 
			 
		  },
			  //打开标签页 右键菜单
			openContextMenu(e) {
					//console.log(e.srcElement);
				let currentContextTabId = "";
				if (e.srcElement.id) {
					//当前节点
					currentContextTabId = e.srcElement.id.split("-")[1];
					this.$store.dispatch('saveCurTabId',currentContextTabId);
					
					
				}else{
					//父节点
					currentContextTabId = e.srcElement.parentElement.id.split("-")[1];
					this.$store.dispatch('saveCurTabId',currentContextTabId);
				}
				
				
				this.isShowTabRightMenu = true;
				this.left = e.clientX;
				this.top = e.clientY + 10;
				
			},
			//关闭 标签页右键菜单
			closeContextMenu(){
				this.isShowTabRightMenu = false;
			} ,
			//关闭所有tab
			closeAllTabs(){
				this.$store.commit("closeAllTabs");
				this.isShowTabRightMenu = false;
				//设置 激活页为 主页
				
				//显示对应路由
				this.$router.push({ path:HOME_PAGE_ROUTE });
				//激活 对应标签页
				this.$store.dispatch('setActiveTab', HOME_PAGE_ROUTE);
				// 激活导航栏
				this.$store.dispatch('setActiveNav', "0");
				
			},
			// 关闭其它标签页
			closeOtherTabs(par) {
				this.$store.commit("closeOtherTabs", par);
				this.isShowTabRightMenu = false;
				
				//显示对应路由
				this.$router.push({ path:this.$store.state.curRightClickTabId });
				//激活 对应标签页
				this.$store.dispatch('setActiveTab', this.$store.state.curRightClickTabId);
				
				//找到 ID 对应的 导航栏
				let curTab =
					this.$store.state.tabs.filter(tab => tab.name == this.$store.state.curRightClickTabId);
				// 激活导航栏
				this.$store.dispatch('setActiveNav', curTab[0].label);
			}
		}
	}
</script>

<style>
.home-panel{
	padding-left: 10px;
	padding-right: 10px;
}
 /**
   * 标签 被激活以后的样式
   */
  div.is-active>span {
	 color:#0055ff;
  }
  /**
   * 右键菜单
   */
  .contextmenu {
    width: 100px;
    margin: 0;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
  }
  .contextmenu li {
    margin: 0;
    padding: 7px 16px;
  }
  .contextmenu li:hover {
    background: #f2f2f2;
    cursor: pointer;
  }
</style>
